<template>
    <div class="register-container">
        <ElForm class="form" :model="formData" :rules="rules" label-width="90px" ref="formIns" size="large">
            <div class="returnIcon">
                <ElButton circle :icon="ArrowLeftBold" @click="returnPrev"></ElButton>
            </div>
            <ElFormItem label="账号" prop="username">
                <ElInput placeholder="请输入账号" v-model="formData.username"></ElInput>
            </ElFormItem>
            <ElFormItem label="手机号" prop="phoneNumber">
                <ElInput placeholder="请输入手机号" v-model="formData.phoneNumber"></ElInput>
            </ElFormItem>
            <ElFormItem label="密码" prop="password">
                <ElInput placeholder="请输入密码" type="password" v-model="formData.password" show-password></ElInput>
            </ElFormItem>
            <ElFormItem label="验证码" prop="check">
                <el-input v-model="formData.check" placeholder="请输入验证码">
                    <template #append>
                        <ElButton type="primary" @click="() => console.log(222)">发送验证码</ElButton>
                    </template>
                </el-input>
            </ElFormItem>
            <ElFormItem class="register-button-content">
                <ElButton type="primary" @click="registerHandle">注册</ElButton>
            </ElFormItem>
        </ElForm>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElMessage,
} from "element-plus";

import type { FormRules, FormInstance, } from "element-plus";
import { ArrowLeftBold } from "@element-plus/icons-vue";
type AnyObj = { [k: string]: any };

const rules = ref<FormRules>({
    username: [
        { required: true, message: "需要填写用户名" },
        { max: 8, message: "最多八位" },
    ],
    password: [
        { required: true, message: "需要填写密码" },
        { max: 8, message: "最多八位" },
    ],
    phoneNumber: [
        { required: true, message: "请输入手机号" }
    ],
    check: [
        { required: true, message: "请输入验证码" }
    ]
});

const router = useRouter();
const formData = reactive({
    username: "",
    password: "",
    phoneNumber: "",
    check: "",
});

const formIns = ref<FormInstance>();

const registerHandle = () => {
    const data: AnyObj = {};

    formIns.value?.validate().then((r) => {
        if (r) {
            Object.keys(formData).forEach((k) => {
                k !== "rePassword" && (data[k] = (formData as any)[k]);
            });
            axios.post("api/register", data).then((d) => {
                const message = d.data.message;
                if (message === "账号已经存在") {
                    ElMessage({
                        message,
                        type: "error",
                    });
                } else {
                    ElMessage({
                        message,
                        type: "success",
                    });

                    router.push("/");
                }
            });
        }
    });
};

const returnPrev = () => {
    router.push("/");
};
</script>

<style scoped>
.register-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.forget-pwd:deep(.el-form-item__content) {
    justify-content: right;
}

.form {
    width: 460px;
    position: relative;

    .register-button-content {
        button {
            flex: 1 1;
            /* height: 45px; */
        }
    }
}

.returnIcon {
    position: absolute;
    left: -50px;
    z-index: 2;
}
</style>